<template>
  <modal-box :show="$store.state.showItem" @close="$store.commit('setShowItem', false)">
    <div class="menu-modal">
      <h2>{{$store.getters.menuName}}的用料</h2>
      <input type="text" placeholder="输入用料名" v-model.trim="name">
      <input type="text" placeholder="输入数目备注等" v-model.trim="info">
      <button @click="save">保存</button>
    </div>
  </modal-box>
</template>

<script>
import ModalBox from "./ModalBox.vue";
export default {
  components: { ModalBox },
  data() {
    return {
      name: '', // 用料名称
      info: ''
    }
  },
  methods: {
    save() {
      this.$store.commit('addItem', {
        name: this.name,
        info: this.info
      })
      this.$store.commit('setShowItem', false);

      this.name = '';
      this.info = '';
    }
  }
};
</script>
